<template>
  <div class="albums-page">
    <!-- 公共头部组件 -->
    <PageHeader
      title="相册"
      :itemCount="total"
      itemUnit="个相册"
      :secondaryCount="getTotalPhotos()"
      secondaryUnit="张照片"
      description="记录生活中的美好瞬间"
    />

    <!-- 相册列表区域 -->
    <div class="albums-list">
      <!-- 相册卡片 -->
      <AlbumCard v-for="album in albums" :key="album.id" :album="album" :fromPage="currentPage" />
    </div>

    <!-- 分页控件 -->
    <Pagination
      :currentPage="currentPage"
      :totalPages="totalPages"
      @update:currentPage="handlePageChange"
    />

    <!-- 空状态 -->
    <EmptyState v-if="albums.length === 0 && !loading" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import PageHeader from '@/components/PageHeader.vue'
import AlbumCard from './components/AlbumCard.vue'
import Pagination from './components/Pagination.vue'
import EmptyState from './components/EmptyState.vue'
import { getAlbumList } from '@/api/album'

const route = useRoute()

// 相册数据
const albums = ref([])
const loading = ref(false)
const total = ref(0)
const pageSize = 8 // 每页8条

// 分页逻辑
const currentPage = ref(1)
const totalPages = computed(() => Math.ceil(total.value / pageSize))

// 数据转换函数：将后端数据转换为前端需要的格式
const transformAlbumData = (apiData) => {
  return apiData.map((item) => ({
    id: item.id,
    title: item.name,
    description: item.description || '暂无描述',
    coverImg: item.picUrl || 'https://picsum.photos/id/10/800/600',
    photoCount: item.imgCount || 0,
    views: 0, // 后端暂无浏览量字段，使用默认值
    date: item.createOn,
    // 保留原始数据用于其他用途
    originalData: item,
  }))
}

// 获取相册列表数据
const fetchAlbums = async (page = 1) => {
  try {
    loading.value = true
    const response = await getAlbumList({
      status: '1',
      pageNum: page,
      pageSize: pageSize,
    })

    albums.value = transformAlbumData(response.records || [])
    total.value = response.total || 0
  } catch (error) {
    console.error('获取相册列表失败:', error)
    // 如果API失败，使用模拟数据作为降级方案
    albums.value = transformAlbumData(mockAlbumsData)
    total.value = mockAlbumsData.length
  } finally {
    loading.value = false
  }
}

// 处理页码变化
const handlePageChange = (newPage) => {
  currentPage.value = newPage
  fetchAlbums(newPage)
}

// 计算照片总数
const getTotalPhotos = () => {
  return albums.value.reduce((total, album) => total + album.photoCount, 0)
}

// 模拟数据（作为降级方案）
const mockAlbumsData = [
  {
    id: 1,
    name: '旅行日记',
    description: '记录在路上的风景与故事，留下每一个值得珍藏的瞬间。',
    picUrl: 'https://picsum.photos/id/10/800/600',
    imgCount: 24,
    createOn: '2023-10-15',
  },
  {
    id: 2,
    name: '城市印象',
    description: '城市中的光影交错，街头巷尾的人文风情，记录都市生活的点滴。',
    picUrl: 'https://picsum.photos/id/42/800/600',
    imgCount: 18,
    createOn: '2023-08-22',
  },
  {
    id: 3,
    name: '美食记录',
    description: '品味人间烟火，记录舌尖上的故事。',
    picUrl: 'https://picsum.photos/id/24/800/600',
    imgCount: 36,
    createOn: '2024-01-05',
  },
]

// 监听路由变化
watch(
  () => route.query.page,
  (newPage) => {
    if (newPage) {
      currentPage.value = Number(newPage)
      fetchAlbums(Number(newPage))
    }
  },
)

onMounted(() => {
  const page = route.query.page ? Number(route.query.page) : 1
  currentPage.value = page
  fetchAlbums(page)
})

defineOptions({ name: 'AlbumsPage' })
</script>

<style lang="scss" scoped>
// 页面整体布局
.albums-page {
  padding: 2rem 1rem 4rem;
  max-width: 1200px;
  margin: 0 auto;
}

// 相册列表三列紧凑布局
.albums-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  margin-bottom: 3rem; // 增加与分页组件之间的间距
}

// 移动端适配
@media (max-width: 1000px) {
  .albums-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .albums-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .albums-list {
    grid-template-columns: 1fr;
  }
}

// 暗色模式适配
:deep(html.dark) {
  .albums-page {
    background: var(--bg-dark, #181a1b);
  }
}
</style>
